<template>
  <div>
		<title-bar :title="'门店排行'" />
    <van-tabs sticky :active="activeIndex" @click="handleTabClick" style="margin-top: 46px;">
      <van-tab v-for="(tabItem, i) in tabItems" :key="i" :title="tabItem.title">
        <div class="header_text">
          <span class="num_me">我的销量：<span>{{numTotal}}</span></span>
          <span class="ranking_me">我的排名：<span>{{ranking}}</span></span>
          <span class="num_me" v-if="tabItem.status < 3" >距离上一名：<span>{{numLess}}</span></span>
        </div>
        <van-list v-model="loading" class="scroll-load" :finished="finished">
            <van-cell-group>
              <van-cell v-for="(item, i) in items" :key="i">
                <div slot="title">
                    <div class="float-l" style="margin: 10px 10px 10px 0;">
                        <div class="ranking_panel" :style="{'background-color': item.ranking < 4 ? 'gold' : 'gray'}">{{item.ranking}}</div>
                    </div>
                    <div><b>{{item.shopName || '无名'}}</b></div>
                    <div class="sales_text">
                        <span>销量：<span>{{item.orderTotal}}</span>单</span>
                        <span>销售额：<span>{{item.amountTotal}}</span>元</span>
                    </div>
                </div>
                <!-- 距离排名 -->
                <!-- <div slot="right-icon" class="ranking_text" v-if="tabItem.status < 3">
                    <van-icon name="arrowupcircle"/>{{item.riseRanking || 0}}
                </div> -->
              </van-cell>
            </van-cell-group>
        </van-list>
        <is-empty v-if="isEmpty">没有找到符合条件的记录</is-empty>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import {
  Tabs,
  Tab,
} from 'vant';
import IsEmpty from "@/vue/components/is-empty/";
import loadMore from "@/vue/mixin/list-load-more";
import { COMMANDER_RANKING } from "@/api/user";
import TitleBar from '@/vue/components/title-bar/';

export default {
  mixins: [loadMore],

  data() {
    return {
      tabItems: [{
        title: '今日',
        status: 0
      }, {
        title: '本周',
        status: 1
      }, {
        title: '本月',
        status: 2
      }, {
        title: '累计',
      }],
      shopId: this.getUser().id,
      activeIndex: 0,
      numTotal: 0,
      ranking: 0,
      numLess: 0
    }
  },
  created() {
    this.resetInit();
  },
  methods: {
    initData() {
      const timeType = this.tabItems[this.activeIndex].status;
      return this.$reqGet(
        COMMANDER_RANKING, {
          shopId: this.shopId,
          type: timeType
        }, {
          hideLoading: true
        }
      ).then(res => {
        const {
          currentTm,
          shopRankings
        } = res.data.data;
        this.items.push(...shopRankings);
        // console.log('排名')
        // console.log(this.items)
        this.numTotal = currentTm.orderTotal || 0;
        this.numLess = currentTm.riseRanking || 0;
        this.ranking = currentTm.ranking || 0;
        this.finished = true;
        return {
          pageCount: shopRankings.length,
          totalCount: shopRankings.length
        };
      });
    },
    handleTabClick(index) {
        this.activeIndex = index;
        this.resetInit();
    },
  },
  components: {
      [Tabs.name]: Tabs,
      [Tab.name]: Tab,
      [IsEmpty.name]: IsEmpty,
			[TitleBar.name]: TitleBar
  }  
}
</script>
<style lang="scss" scoped>
.header_text {
    font-size: 10px;
    color: white;
    padding: 10px;
    text-align: center;
    background-color: $green;
    display: flex;
}

.num_me {
    flex: 1;
    > span {
      font-size: 16px;
    }
    ::after {
        content: ' 单';
        font-size: 10px;
    }
}
.ranking_me {
    flex: 1;
    > span {
        font-size: 16px;
    }
    ::after {
        content: ' 名';
        font-size: 10px;
    }
}

.sales_text {
    color: gray;
    font-size: 12px;
    > span {
        margin-right: 10px;
        > span {
            color: $red;
            font-size: 14px;
        }
    }
}

.ranking_panel {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    text-align: center;
    color: white;
    display: table-cell;
    vertical-align: middle;
}

.ranking_text {
    color: $red;
    font-size: 20px;
    padding: 10px 0;
    > i {
        margin-right: 3px;
        font-size: 18px;
    }
}

</style>
